<!--
  导航组件-分类组件
      v-show="item.serviceName==$route.meta.defaultPath" 
--->

<template>
 <ul class="menu">
    <li class="menu-item-group" 
    v-for="(item,index) in list" 
    :key="index" 
    :class="{on:$route.path==item.router}">
      <div class="menu-item-title"  :style="{paddingLeft:8*level+'px'}"  @click="item.children?onClick(index,level):gotoNav(item,item.serviceName)">
        <icon-font class="icon" :type="item.icon || 'iconkaiqipingmu'" @click.stop="onClick(index,level)"/>{{item.name}}
      </div>
      <ul :id="'id_'+index+level">
        <v-submenu :list="item.children" :level='level + 1'></v-submenu>
      </ul>
    </li>
  </ul>
</template>

<script lang="ts">
import {onMounted,toRefs,ref,watch} from 'vue'
import {gotoNav,frameworkData} from '@/assets/js/common/framework.js';
import { createFromIconfontCN } from '@ant-design/icons-vue';
const IconFont = createFromIconfontCN({scriptUrl:'//at.alicdn.com/t/font_1314556_pclahsdrhs.js'}); //页目https://www.iconfont.cn中 web 项目图标

export default{
  name: 'vSubmenu',
  props:{
    list:{
      type:Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return []
      }
    },
    level:{
      type:Number,
      default:1
    },
     // 带有默认值的对象
    defaultPath:{
      type:String,
      defaul:"1"
    }
  },
  components:{
    IconFont
  },
  setup(props, context){
   const onClick=(index,level)=>{
     console.log("==========到这里了没有============")
     let ById=document.getElementById(`id_${index}${level}`)
         console.log("======================")
         if(ById.style.display=="none"){
            ById.style.display="block"
         }else{
            ById.style.display="none"
         }
    }
    return{
        gotoNav,
        frameworkData,
        onClick
      }
  }
}
</script>

<style lang="scss" scoped>
::v-deep(.icon){
  color: #000;
  padding-right: 8px;
  font-size:16px;
  cursor:pointer;
}
</style>